import Taro, { Component, Config } from '@tarojs/taro'
import { Image, View, ScrollView, Text } from '@tarojs/components'
import './index.scss'
import { toUserPage } from "@/utils/page_router"
import { getMemberCount, buyMember, getMemberPermanent } from "@/api/userApi"
import { USER_INFO } from "@/config/storage"
import { formatAmount } from "@/utils/utils"
import { Loading } from "@/components/index"

export default class Index extends Component {
  state: any
  config: Config = {
    backgroundColor: process.env.backgroundColor,
    backgroundTextStyle: "dark",
    navigationBarTitleText: '购买会员',
    navigationBarTextStyle: process.env.navigationBarTextStyle,
    navigationBarBackgroundColor: process.env.backgroundColor
  }

  constructor () {
    super(...arguments)
    this.state = {
      loading: true,
      userNum: 0,
      dataInfo: {},
      userInfo: Taro.getStorageSync(USER_INFO) || {},
    }
  }

  componentWillMount() {
    this.getCount()
  }

  //  统计会员数量
  async getCount() {
    const resCount = await getMemberCount()
    getMemberPermanent().then(res => {
      this.setState({
        loading: false,
        userNum: resCount.data,
        dataInfo: res.data
      })
    })
  }

  //  购买会员
  payMember() {
    const { dataInfo } = this.state
    buyMember({ vipPayId: dataInfo.id, amount: dataInfo.amount }).then(res => {
      let data = res.data
      Taro.requestPayment(data).then(() => {
        wx.hideLoading()
        wx.showToast({ title: '支付成功', icon: 'success' })
        toUserPage()
      }).catch(() => {
        wx.hideLoading()
        wx.showToast({ title: '支付取消', icon: 'none' })
      })
    })
  }

  render() {
    const { loading, userNum, userInfo, dataInfo } = this.state
    return (<View className='pay-page'>
      {loading && <Loading isCover/>}
      <ScrollView className='pay-scroll'>
        <View className='pay-head d-f a-i-c j-c-b'>
          <View className='user-info f-g-4'>
            <Image src={userInfo.headImg} className='user-avatar'/>
            <View className='user-name'>{userInfo.nickName}</View>
          </View>
          <View className='join-user'>
            <View className='join-people'><Text className='people-num'>{userNum}</Text>人</View>已加入会员权益
          </View>
        </View>
        <View className='pay-body'>
          <View className='pay-card goods-card'>
            <View className='card-head'>
              <View className='head-title'>选择会员类型</View>
            </View>
            <View className='card-body'>
              <View className='card-body'>
                <View className='card-item thin-border__b d-f a-i-c j-c-b'>
                  <View className='item-left'>
                    <View className='goods-name'>{dataInfo.name}</View>
                    <View className='goods-price d-f a-i-b'>
                      <View className='bnn-number sale-price f-s-36 m-r-10'>￥{dataInfo.amount}</View>
                      <View className='bnn-number origin-price f-s-24'>￥{dataInfo.originAmount}</View>
                    </View>
                    <View className='goods-info f-g-4'>{dataInfo.remark}<View className='bnn-icon m-l-10'>&#xe691;</View></View>
                  </View>
                  {/*<View className='item-right'>*/}
                  {/*  <View className='goods-checkbox'>*/}
                  {/*    <View className='unchecked-icon'/>*/}
                  {/*    <View className='bnn-icon unchecked-icon check-icon'>&#xe645;</View>*/}
                  {/*  </View>*/}
                  {/*</View>*/}
                </View>
              </View>
            </View>
          </View>
        </View>
        <View className='pay-foot--height'/>
        <View className='pay-foot fy-popup fy-popup--bottom d-f a-i-c j-c-b'>
          <View className='pay-info d-f a-i-b'>合计：
            <View className='pay-amount bnn-number'><Text className='price-unit'>￥</Text>{formatAmount(dataInfo.amount)}</View>
          </View>
          <View className='pay-btn f-g-5' hoverClass='hover-class--btn' onClick={this.payMember.bind(this)}>立即开通</View>
        </View>
      </ScrollView>
    </View>)
  }
}
